<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉大树洞 - 话题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div class="background"></div>
    
    <div class="main-container">
        <div class="content-container">
            <h1>话题列表</h1>
            
            <!-- 搜索框 -->
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="搜索话题...">
                <button id="searchButton">搜索</button>
            </div>
            
            <div id="topicsList" class="topics-list">
                <!-- 动态生成的话题内容 -->
            </div>
            
            <div class="button-container">
                <a href="post_topic.html" class="button">发表新话题</a>
            </div>
        </div>
    </div>

    <script>
        // 从 localStorage 获取话题列表
        let topics = JSON.parse(localStorage.getItem('topics')) || [];
        const topicsList = document.getElementById('topicsList');
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');

        // 显示所有话题
        function displayTopics(topicsToDisplay) {
            topicsList.innerHTML = '';
            
            if (topicsToDisplay.length > 0) {
                topicsToDisplay.forEach(topic => {
                    const topicElement = document.createElement('div');
                    topicElement.classList.add('topic');
                    topicElement.innerHTML = `
                        <h2><a href="topic_detail.html?topicId=${topic.id}">${topic.title}</a></h2>
                        <p>${topic.content}</p>
                        ${topic.image ? `<img src="${topic.image}" alt="话题图片" style="max-width:100%; border-radius:4px; margin:10px 0;">` : ''}
                        <small>发布时间: ${topic.timestamp}</small>
                        <div class="topic-footer">
                            <span class="author">
                                发表者: ${topic.anonymous ? '匿名' : (topic.author || '用户')} 
                                ${topic.anonymous ? '' : (topic.gender === 'male' ? '♂' : topic.gender === 'female' ? '♀' : '')}
                            </span>
                            <span class="reply-count">回复: ${topic.replies ? topic.replies.length : 0}</span>
                        </div>
                    `;
                    topicsList.appendChild(topicElement);
                });
            } else {
                topicsList.innerHTML = '<p>暂无话题</p>';
            }
        }

        // 初始显示所有话题
        displayTopics(topics);

        // 搜索功能
        searchButton.addEventListener('click', function() {
            const searchTerm = searchInput.value.toLowerCase();
            if (searchTerm) {
                const filteredTopics = topics.filter(topic => 
                    topic.title.toLowerCase().includes(searchTerm) || 
                    topic.content.toLowerCase().includes(searchTerm)
                );
                displayTopics(filteredTopics);
            } else {
                displayTopics(topics);
            }
        });

        // 回车键搜索
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchButton.click();
            }
        });
    </script>
</body>
</html>